<template>
  <div class="w">
    <!-- 标题 -->
    <div class="title-area">
      <span> 字典管理 </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">
      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="form"
          ref="formRef"
          :labelCol="{ span: 5, offset: 0 }"
          @finish="formFinish"
          :initialValues="initQueryForm"
        >
          <Row :gutter="16">
            <Col :span="8">
              <FormItem name="dictName" label="字典名称" initialValue="">
                <Input placeholder="请输入字典名称" style="width: 70%" />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem name="status" label="字典状态" initialValue="" style="position: relative;" class="selectPosition">
                <Select
                  placeholder="请选择字典状态"
                  style="width: 70%"
                  allowClear
                  :getPopupContainer="getPopupContainer"
                >
                  <Option
                    v-for="type in dict.type.sys_normal_disable"
                    :key="type.value"
                    :label="type.label"
                    :value="type.value"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem name="phonenumber" label="字典类型" initialValue="">
                <Input placeholder="请输入字典类型" style="width: 70%" />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem :wrapperCol="{ span: 20, offset: 5 }">
                <Button type="primary" @click="formQuery">
                  <Icon
                    name="search"
                    style="margin-top: 3px; margin-right: 5px"
                  />
                  查 询
                </Button>
                <Button style="margin-left: 10px" @click="formReset">
                  <Icon
                    name="rollback-outline"
                    style="margin-top: 3px; margin-right: 5px"
                  />
                  重 置
                </Button>
                <!-- <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button> -->
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>

      <!-- 分割线 -->
      <Divider />

      <!-- 按钮区 -->
      <div class="button-area">
        <Button type="primary" @click="tblOptForm()">
          <Icon name="add" /> 新增
        </Button>
      </div>
      <Skeleton
        :loading="loading"
        :avatar="false"
        active
        :paragraph="{ rows: 6 }"
      >
        <!-- 列表区 -->
        <Table
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :scroll="{ y: 470 }"
          @change="handleTableChange"
          :pagination="{
            total: total,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSize: queryForm.pageSize,
            current: queryForm.pageNum,
          }"
        >
          <template #render="render">
            <div v-if="render.dataIndex == 'status'">
              <dict-tag
                :options="dict.type.sys_normal_disable"
                :value="render.record.status"
              />
            </div>
            <div v-else-if="render.dataIndex == 'dictType'">
              <router-link
                :to="'/system/dict-data/index/' + render.record.dictId"
                class="link-type"
              >
                <span>{{ render.record.dictType }}</span>
              </router-link>
            </div>
            <div v-else-if="render.dataIndex == 'operation'">
              <a href="#" @click.prevent="tblOptForm(render.record)">
                <Icon name="edit" style="margin-top: 4px" /> 编辑
              </a>
              <!-- <span> | </span> -->
              <!-- <Popconfirm :title="`是否确认删除序号为 ${render.record.dictId} 的字典信息？`" @confirm="removeDataLine(render.record)">
              <a href="#">
                <Icon name="delete-can" style="margin-top: 4px;" /> 删除
              </a>
            </Popconfirm> -->
              <a
                href="#"
                @click.prevent="
                  deleteClick(render.record.dictId, render.record.dictName)
                "
                ><Icon name="delete-can" style="margin-top: 4px" />删除</a
              >
            </div>
          </template>
          <template #paginationTotal="props">
            <span>总共 {{ props.total }} 条</span>
          </template>
        </Table>
      </Skeleton>
    </div>

    <!-- 表单页对话框 -->
    <Modal
      class="fromModal"
      :title="formDialogInfo.title"
      v-model="formDialogInfo.visible"
      @cancel="formDialogInfo.visible = false"
      width="1100px"
      :bodyStyle="{ padding: '0px' }"
      :footer="[null]"
    >
      <resource-form
        :key="Date.now()"
        :id="formDialogInfo.id"
        :currRow="formDialogInfo.currRow"
        :refData="{
          resourceTypes: this.dict.type.resource_type,
        }"
        @handleCancel="formDialogCancel"
      />
    </Modal>
  </div>
</template>

<script>
import { Message } from "@uni/vue";
import { changeUserStatus } from "@/api/system/user";

import { listType, delType } from "@/api/system/dict/type";
import resourceForm from "./form.vue";

export default {
  name: "app",
  dicts: ["sys_normal_disable"],
  components: {
    resourceForm,
  },
  data: function () {
    return {
      loading: true,
      newPassword: "",
      formDialogInfo: {
        title: "",
        visible: false,
        id: 0,
        currRow: {},
      },
      queryForm: {},
      initQueryForm: {
        dictName: "",
        status: "",
        phonenumber: "",
      },
      tableColumns: [
        // {"title":"字典编号", "dataIndex":"dictId", "key":"dictId", "align":"center", width:80},
        {
          title: "字典名称",
          dataIndex: "dictName",
          key: "dictName",
          align: "center",
          width: 140,
        },
        {
          title: "字典类型",
          dataIndex: "dictType",
          key: "dictType",
          align: "center",
        },
        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          align: "center",
          width: 80,
        },
        { title: "状态", dataIndex: "status", key: "status", align: "center" },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          align: "center",
          width: 120,
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          align: "center",
          width: 200,
        },
      ],
      tableData: [],
      total: 0,
      roleOptions: [],
    };
  },
  mounted() {
    this.formFinish();
  },
  methods: {
    getPopupContainer() {
      return document.querySelector(".selectPosition")
    },
    /** 删除按钮操作 */
    deleteClick(id, name) {
      this.$MessageBox.ModalConfirm(
        '是否确认删除名称为"' + name + '"的数据项？',
        () => {
          delType(id).then(() => {
            this.queryList();
            Message.success({ text: "删除成功" });
            done();
          });
        }
      );
    },
    formQuery() {
      this.$refs.formRef.submit();
    },
    formReset() {
      this.$refs.formRef.reset();
    },
    async queryList() {
      this.loading = true;
      const rs = await listType(this.queryForm);
      if (rs.code !== 200)
        return Message.error({ text: "获取用户列表信息失败：" + rs.msg });
      this.tableData = rs.rows;
      this.tableData.map((item) => {
        if (item.dept) item.deptName = item.dept.deptName;
      });
      this.total = rs.total;
      this.loading = false;
      // console.log("rs: ", rs);
    },
    async formFinish(formValues) {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        dictName: formValues ? formValues.dictName : "",
        dictType: formValues ? formValues.dictType : "",
        status: formValues ? formValues.status : "",
      };
      this.queryList();
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.queryForm.pageNum = current;
      this.queryForm.pageSize = pageSize;
      this.queryList();
      console.log("filters", p, filters);
    },
    tblOptForm(record) {
      this.formDialogInfo.id = record ? record.dictId : 0;
      this.formDialogInfo.currRow = record ? record : {};
      this.formDialogInfo.currRow.roleOptions = this.roleOptions;
      this.formDialogInfo.title = (record ? "修改" : "新增") + "字典";
      this.formDialogInfo.visible = true;
    },
    formDialogCancel() {
      this.formDialogInfo.visible = false;
      this.formFinish();
    },
    async removeDataLine(record) {
      const rs = await delType(record.dictId);
      if (rs.code !== 200)
        return Message.error({ text: "删除字典信息失败：" + rs.msg });

      Message.success({ text: "删除字典信息完成" });
      this.formQuery();
    },
  },
};
</script>

<style scoped lang="scss">
.w {
  /* height: 100%; */
  background-color: #f9fafb;
}

/* 标题 */
.title-area {
  height: 36px;
  background-color: #e9ebf0;
}
.title-area span {
  display: inline-block;
  font-weight: 500;
  line-height: 36px;
  margin-left: 15px;
}

/* 主体内容显示区 */
.content-area {
  /* background-color: lightblue; */
  height: 100%;
  margin-left: 25px;
  margin-right: 25px;
  padding-bottom: 15px;
}

/* 查询表单区 */
.form-area {
  /* background-color: lightcyan; */
  margin-top: 15px;
  margin-left: 50px;
  margin-right: 50px;
}

.uni-divider {
  margin: 0;
}

/* 按钮区 */
::v-deep .button-area {
  margin: 20px 0 8px;
  .uni-btn-inner {
    display: flex;
    align-items: center;
  }
  /* background-color: lightcyan; */
}
.button-area svg {
  margin-right: 5px;
}

/* 列表区 */

/* 弹框区 */
::v-deep
  .fromModal
  > .uni-modal-wrap
  > .uni-modal-wrap-content
  > .uni-modal-footer {
  padding: 0;
}
</style>
